
<template>
  <div class="project-main-box">
    <div ref="headBar" style="overflow: visible" :style="{ height: divHeight  + 'px', transition: 'height 0.5s' }">
      <div class="head-bar">
        <span class="head-title">借鬼镇测试</span>
        <span class="head-button-box">
          <el-button type="primary"  size="medium" round class="head-button" @click="pushJson(0)">导出Json文件</el-button>
          <el-button type="success"  size="medium" round class="head-button" @click="pushJson(1)">发布到平台</el-button>
          <el-upload style="float: right;" class="upload-demo" ref="upload" accept=".xlsx" :action="UploadUrl()" :on-preview="handlePreview"
                     :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :on-success="handleUploadSuccess">
             <el-button slot="trigger" size="small" round type="primary" class="head-button" >选择文案EXCEL</el-button>
             <el-button size="small" type="success" round @click="submitUpload" class="head-button">上传</el-button>
          </el-upload>
        </span>
      </div>
    </div>
    <!--  main身体主要框  -->
    <div class="main-box-body" v-if="loaded">
      <el-tabs v-model="activeTab" @tab-click="changeTabs">

        <!--  form模块   -->
        <el-tab-pane label="活动方案"  name="first" class="tab-box">
          <!-- 内容盒子，建议放组件  -->
          <div class="tab-item-box" ref="tabItemBox" v-if="activeTab=='first'">
              <div class="tab-item-head">
                <span class="tab-item-left">
                  <!--  <remark-template action="gui_zhen"></remark-template>--> 
                  <el-input v-model="searchValue" disabled size="medium"></el-input>
                  <el-button icon="el-icon-search" style="margin-left: 10px" size="medium" disabled circle @click="clickFunc('搜索')"></el-button>
                  <el-button type="success" icon="el-icon-check" style="margin-left: 10px" disabled size="medium" circle @click="clickFunc('搜索')"></el-button>
                </span>
                <span class="tab-item-right">
                  <el-button  style="color: #1989fa" icon="el-icon-plus" size="medium" round class="item-head-button" @click="clickFunc">新建</el-button>
                  <el-button style="color:rgb(10,194,58);" icon="el-icon-check" size="medium" round class="item-head-button" @click="clickFunc">保存</el-button>
                </span>
              </div>
            <!--   主要内容模块    -->
            <div class="tab-item-body" ref="tabItemBody">
              <el-table  ref="singleTable" border :data="this.tableList"
                  highlight-current-row header-align="center" style="width: 100%" row-height="30"
                  @current-change="clickChangeTable">
<!--                <el-table-column-->
<!--                    width="50">-->
<!--                </el-table-column>-->
                <el-table-column
                    property="project"
                    label="方案id"
                    align="center"
                    width="100">
                  <template  slot-scope="scope">
                    <span>{{scope.row.id!=-1?scope.row.project:'未更新'}}</span>
                  </template>
                </el-table-column>
                <el-table-column height="60px"
                    align="center"
                    property="remark"
                    label="备注remark"
                    min-width="700">
                  <template  slot-scope="scope">
                    <el-input size="medium" v-model="scope.row.remark.remark1" @input="inputRemark(scope.$index)" @blur="clickSaveRemark(scope.$index, scope.row)" style="width:400px;" ></el-input>
                  </template>                     
                </el-table-column>
                
                <el-table-column label="操作"  align="center" width="250px" class="action-column">
                  <template slot-scope="scope">
                    <el-button
                        size="small" plain type="primary" icon="el-icon-document-copy" class="ly-mini-button"
                        @click="clickCloneTable(scope.$index, scope.row)">克隆</el-button>
                    <el-button
                        size="small" plain type="primary" icon="el-icon-info"  class="ly-mini-button"
                        @click="clickInfoTable(scope.$index, scope.row)">详情</el-button>
                    <el-button
                        size="small" type="danger" plain icon="el-icon-delete"  class="ly-mini-button"
                        @click="deleteCloneTable(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span class="scroll-top"  @click="scrollToTop">
                <el-popover
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    content="点击返回最上，向上滚动展示导航条">
                  <span slot="reference" >
                    <i class="el-icon-upload2"></i>
                  </span>
              </el-popover>
              </span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script> 
export default { 
  name: "index",
  data(){
    return {
      rows: {},
      loaded: true, //主页显示
      activeTab: 'first', //加载的tab
      divHeight: 60, //头部导航栏的动态增减
      searchValue: '请输入备注', //搜索值
      fileList: [], //文件上传
      tableList: [{id:0,remark:'remark0',goods:'[1,2,3]'},{id:1,remark:'remark1',goods:'[1,2,3]'}],
      formData: {name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: ''},
      //校验规则
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    const myDiv = this.$refs.tabItemBody;
    // myDiv.addEventListener('wheel', this.handleWheel);
  },
  beforeDestroy() {
    const myDiv = this.$refs.tabItemBody;
    if(myDiv) myDiv.removeEventListener('wheel', this.handleWheel);
  },
  async created() {
    await this.initAll();
  },
  methods:{
    //数据初始化
    async initAll(){ 
      this.loaded = false
      await this.initProjs()
      this.loaded = true      
      this.reloadListen()
    },
    async initProjs(){
      let param = {
        "action": "get_list_method"
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success('Load Data Success')
        this.tableList = res.data
      }else {
        this.$message.error(`${res.info}`)
      }
    },

    //重新启动监听
    reloadListen(){
      this.$nextTick(() => {
        // 在DOM更新后执行回调函数
        // this.divHeight = 200;
        const myDiv = this.$refs.tabItemBody;
        myDiv.removeEventListener('wheel', this.handleWheel);
        myDiv.addEventListener('wheel', this.handleWheel);
      });
    },
    //监听滚动事件
    handleWheel(event) {
      console.log('handleScroll')
      const myDiv = this.$refs.headBar;
      const tabItemBox = this.$refs.tabItemBox;
      if (event.deltaY > 0) {
        this.divHeight = 0;
        myDiv.style.overflow = 'hidden';
        if(tabItemBox) tabItemBox.style.height = 'calc(100vh - 165px)';

      } else {
        this.divHeight = 60;
        myDiv.style.overflow = 'visible';
        tabItemBox.style.height = 'calc(100vh - 225px)';
      }
    },
    //默认点击事件
    clickFunc(){
      console.log('clickFunc')
    },
    //tabs切换事件
    changeTabs(tab){
      console.log('changeTabs,选中的实例',tab);
      let event = {}
      event.deltaY = -20
      this.handleWheel(event);//设置head-bar默认高度
      this.reloadListen(); //重新启动监听
    },
    clickCloneTable(index,row){
      this.$confirm(`克隆id=${row.project},remark= ${row.remark.remark1}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          action : 'clone_data',
          project: row.project
        }
        let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
        if(res.status == 200){
          this.$message.success('clone success')
          this.initAll();
        }else {
          this.$message.error(`${res.info}`)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    //具体模块操作
    //1、form模块
    submitForm(){

    },
    resetForm(){

    },
    // 2、table模块
    clickChangeTable(){

    },
    clickInfoTable(index,row){
      this.$router.push({
        path: "/gui_zhen/inline",
        query: {
          project: row.project
        },
      });
    },
    deleteCloneTable(index,row){
      this.$confirm(`删除id=${row.project},remark= ${row.remark.remark1}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          action : 'delete_data',
          project: row.project
        }
        let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
        if(res.status == 200){
          this.$message.success('delete success')
          this.initAll();
        }else {
          this.$message.error(`${res.info}`)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    inputRemark(index){
      this.rows[index] = true
    },
    async clickSaveRemark(index,row){
      if(this.rows[index] != true) return
      let param = {
        action : 'update_method',
        data: {
          "remark":row.remark
        },
        project: row.project
      }
      let { data:res } = await this.axios.post(this.$settings.HOST + '/gui_zhen_action',param)
      if(res.status == 200){
        this.$message.success(`update project :${row.project}(${row.remark.remark1}) remark success`)
        this.rows[index] = false
        // this.initAll();
      }else {
        this.$message.error(`${res.info}`)
      } 
    },
    //模块通用操作
    scrollToTop() {
      this.$refs.tabItemBody.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // this.$refs.tabItemBody.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

    async pushJson(is_push){
      // let { data:res }  = await this.axios.post(this.$settings.HOST + '/rotary_reward_proj_down_action',)

      if (is_push == 0) {
        window.location.href = this.$settings.HOST + "/gui_zhen_down_action/" + is_push
      } else {
        this.axios.get(this.$settings.HOST + "/gui_zhen_down_action/" + is_push)
            .then(response => {
              this.$message({
                message: '上传成功',
                type: 'success',
                showClose: true,
                offset: 300
              });
            }).catch(function(error) { // 请求失败处理
          console.log(error);
        });
      }
    },
    
     //文件上传
    UploadUrl() {
      return this.$settings.HOST + "/upload/gui_zhen"
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    async handleUploadSuccess() {
      this.$message({
        type: 'success',
        message: '上传成功'
      });
      await this.initProjs()
    },
  }
}
</script>

<style scoped>
/*非侵入修改主题*/
.project-main-box{
  position: fixed;
  right: 10px;
  top: 80px;
}
html{
  background-color: #F5F7FA;
  height: 100vh;
}
body{
  margin: 0px!important;
}
/*tab样式*/
.el-tabs__nav-wrap::after{
  height: 0px!important;
  /*margin-left: 10px!important;*/
}
html::-webkit-scrollbar {
  display: none;
}
.el-main{
  padding: 0px 0 0 0;
  background-color: #F5F7FA;
  height: calc(99vh - 65px) !important;
  width: calc(99% - 10px);
  overflow: visible;
  // overflow-x: hidden;
  /*overflow-y: hidden*/
}
.el-aside{
  min-width: 220px!important;
}
.el-tabs__content{
  overflow: visible!important;
}
</style>

<style scoped>
/*隐藏滚动条*/
/*::-webkit-scrollbar {
  display: none;
}*/
/*非侵入修改主题*/
html{
  background-color: #F5F7FA;
  height: 100vh;
}
.el-main{
  padding: 0px;
  background-color: #F5F7FA;
  height: calc(99vh - 65px) !important;
  width: calc(99% - 10px);
  overflow-x: visible;
  /*overflow-y: hidden*/
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-header {
  background-color: rgb(186 230 253);
  /*background-color: #B3C0D1;*/
  color: #333;
  line-height: 80px;
}

/*主框架内容*/
.project-main-box{
  background-color: #F5F7FA;
  width: calc(97% - 5px); 
  overflow: visible;
  /*position: relative;*/
  margin: 20px;
  margin-top: 5px;
  /*overflow: auto;*/
}
/*头部bar*/
.head-bar{
  position: sticky;
  top: 10px;
  display: flex;
  width: calc(100% - 30px);
  padding: 10px 10px 10px 20px;
  border-radius: 10px;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  border: 1px solid #F5F7FA;
  box-shadow:  2px 2px 5px 5px  rgba(219, 219, 219, 0.5);
}
.head-title{
  font-size: larger;
  font-weight: bolder;
  font-family: '微软雅黑';
}
.head-button-box{
  display: flex;
  justify-content: right;
}
.head-button{
  padding: 10px 30px 10px 30px!important;
  min-width: 80px;
  margin-right: 10px
}

/*身体部分*/
.main-box-body{
  width: 100%;
  /*margin-top: 50px;*/
  background-color: #F5F7FA;
  // margin-top: 10px;
  /*padding: 10px 10px 10px 20px;*/
  border-radius: 10px;
  // max-height: calc(100vh - 205px);
}
/*tab样式*/
.el-tabs >> .el-tabs__content{
  overflow: visible!important;
}
.el-tabs__nav{
  padding-left: 10px!important;
}
.el-tabs__active-bar{
  padding-left: 20px!important;
}
.el-tabs__nav-wrap::after{
  height: 0px!important;
  /*margin-left: 10px!important;*/
}
.el-tabs__content{
  top : -8px;
}
.el-tabs{
  position: relative;
}
.tab-box{
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  /*max-height: calc(100vh - 200px);*/
  box-shadow: 2px 2px 5px 5px rgba(219, 219, 219, 0.5);
}
.item-head-button{
  padding: 8px 20px 8px 20px!important;
  min-width: 80px;
  margin-right: 9px
}


/*每一个tab项的*/
.tab-item-box{
  overflow: auto;
  position: relative;
  height: calc(100vh - 225px);
}
.tab-item-head{
  position: sticky;
  top: 0;
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 0;
  /*background-color: rgba(0, 255, 149, 0.1);*/
  box-shadow: 0px 10px 10px white;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.8);
}
.tab-item-left{
  display: flex;
}
.tab-item-right{

}
.tab-item-body{
  margin-top: 20px;
  min-height: 100%;
  position: relative;
  /*background-color: #409EFF;*/
  /*height: 150vh;*/
}

/*模块通用操作*/
.scroll-top{
  padding: 4px;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 5px;
  background-color: #f2f5f6;
  box-shadow: 0 0 3px 2px rgba(25,137,250, .1);
  text-align: center;
  color: #1989fa;
  position: sticky;
  float: right;
  right: 4px;
  bottom: 4px;
  border: 1px solid #cae4fd;
  opacity: 0.9;
}
.scroll-top:hover{
  cursor: pointer;
}

/*其他系统ui-css*/
/*按钮设置*/
.ly-mini-button{
  padding: 8px!important;
}
</style>